<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
            background: #f8fafc;
            color: #1a202c;
        }



        .logo-section {
            display: flex;
            align-items: center;
        }

        .logo {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            margin-right: 15px;
        }

        .nav-title {
            font-size: 20px;
            font-weight: 600;
            color: #2d3748;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4fd1c7, #06b6d4);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .main-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 30px;
        }

        .page-header {
            margin-bottom: 30px;
        }

        .page-title {
            font-size: 28px;
            font-weight: 700;
            color: #1a202c;
            margin-bottom: 10px;
        }

        .page-subtitle {
            color: #718096;
            font-size: 16px;
        }

        .data-sources-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
            margin-bottom: 40px;
        }

        .data-source-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .data-source-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
        }

        .card-header {
            padding: 25px;
            border-bottom: 2px solid #f7fafc;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .source-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .source-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
        }

        .source-icon.auto {
            background: linear-gradient(135deg, #4299e1, #3182ce);
        }

        .source-icon.ugc {
            background: linear-gradient(135deg, #48bb78, #38a169);
        }

        .source-icon.manual {
            background: linear-gradient(135deg, #ed8936, #dd6b20);
        }

        .source-icon.pr {
            background: linear-gradient(135deg, #9f7aea, #805ad5);
        }

        .source-details h3 {
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 5px;
        }

        .source-description {
            font-size: 14px;
            color: #718096;
        }

        .status-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .status-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        .status-dot.connected {
            background: #48bb78;
        }

        .status-dot.disconnected {
            background: #f56565;
        }

        .status-dot.warning {
            background: #ed8936;
        }

        @keyframes pulse {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }

            100% {
                opacity: 1;
            }
        }

        .status-text {
            font-size: 14px;
            font-weight: 600;
        }

        .status-text.connected {
            color: #22543d;
        }

        .status-text.disconnected {
            color: #c53030;
        }

        .status-text.warning {
            color: #c05621;
        }

        .card-content {
            padding: 25px;
        }

        .connection-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 25px;
        }

        .detail-item {
            display: flex;
            flex-direction: column;
        }

        .detail-label {
            font-size: 12px;
            color: #a0aec0;
            margin-bottom: 5px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .detail-value {
            font-size: 14px;
            font-weight: 600;
            color: #2d3748;
        }

        .sync-stats {
            background: #f8fafc;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .stats-title {
            font-size: 14px;
            font-weight: 600;
            color: #4a5568;
            margin-bottom: 15px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 20px;
            font-weight: 700;
            color: #2d3748;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 12px;
            color: #718096;
        }

        .sync-controls {
            display: flex;
            gap: 10px;
        }

        .sync-btn {
            flex: 1;
            padding: 10px 15px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            background: white;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sync-btn:hover {
            border-color: #667eea;
            color: #667eea;
        }

        .sync-btn.primary {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border-color: transparent;
        }

        .sync-btn.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
        }

        .last-sync {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #e2e8f0;
            font-size: 13px;
            color: #718096;
            text-align: center;
        }

        .sync-time {
            font-weight: 600;
            color: #4a5568;
        }



        .section-title {
            font-size: 20px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .data-flow-diagram {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 30px;
        }

        .flow-node {
            background: #f8fafc;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            min-width: 150px;
            position: relative;
        }

        .flow-node.source {
            background: linear-gradient(135deg, #4299e1, #3182ce);
            color: white;
            border-color: transparent;
        }

        .flow-node.processing {
            background: linear-gradient(135deg, #ed8936, #dd6b20);
            color: white;
            border-color: transparent;
        }

        .flow-node.destination {
            background: linear-gradient(135deg, #48bb78, #38a169);
            color: white;
            border-color: transparent;
        }

        .flow-arrow {
            font-size: 24px;
            color: #a0aec0;
        }

        .flow-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .flow-subtitle {
            font-size: 12px;
            opacity: 0.8;
        }

        .integration-logs {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .logs-header {
            background: #f8fafc;
            padding: 20px 25px;
            border-bottom: 2px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logs-title {
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
        }

        .refresh-btn {
            padding: 8px 16px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .refresh-btn:hover {
            background: #5a67d8;
        }

        .logs-content {
            max-height: 300px;
            overflow-y: auto;
        }

        .log-entry {
            padding: 15px 25px;
            border-bottom: 1px solid #f1f5f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .log-entry:hover {
            background: #fafbfc;
        }

        .log-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .log-icon {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .log-icon.success {
            background: #48bb78;
        }

        .log-icon.error {
            background: #f56565;
        }

        .log-icon.warning {
            background: #ed8936;
        }

        .log-message {
            font-size: 14px;
            color: #2d3748;
        }

        .log-time {
            font-size: 12px;
            color: #a0aec0;
        }



        .alert-icon {
            font-size: 20px;
        }

        .alert-content {
            flex: 1;
        }

        .alert-title {
            font-size: 14px;
            font-weight: 600;
            color: #c53030;
            margin-bottom: 5px;
        }

        .alert-message {
            font-size: 13px;
            color: #742a2a;
        }

        .alert-close {
            background: none;
            border: none;
            font-size: 18px;
            color: #c53030;
            cursor: pointer;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .data-sources-grid {
                grid-template-columns: 1fr;
            }

            .connection-details {
                grid-template-columns: 1fr;
            }

            .data-flow-diagram {
                flex-direction: column;
            }

            .flow-arrow {
                transform: rotate(90deg);
            }
        }
    </style>
</head>

<body>


    <main class="main-container">
        <div class="page-header">
            <h1 class="page-title">数据整合中心</h1>
            <p class="page-subtitle">监控和管理所有外链数据源的连接状态和同步情况</p>
        </div>



        <!-- 数据源状态卡片 -->
        <div class="data-sources-grid">
            <!-- 自动化外链系统 -->
            <div class="data-source-card">
                <div class="card-header">
                    <div class="source-info">
                        <div class="source-icon auto">🤖</div>
                        <div class="source-details">
                            <h3>自动化外链系统</h3>
                            <div class="source-description">直连数据库，实时同步</div>
                        </div>
                    </div>
                    <div class="status-indicator">
                        <div class="status-dot connected"></div>
                        <span class="status-text connected">已连接</span>
                    </div>
                </div>
                <div class="card-content">
                    <div class="connection-details">
                        <div class="detail-item">
                            <div class="detail-label">数据库地址</div>
                            <div class="detail-value">192.168.1.10:3306</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">连接状态</div>
                            <div class="detail-value">正常</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">延迟</div>
                            <div class="detail-value">2ms</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">同步模式</div>
                            <div class="detail-value">实时同步</div>
                        </div>
                    </div>

                    <div class="sync-stats">
                        <div class="stats-title">今日同步统计</div>
                        <div class="stats-grid">
                            <div class="stat-item">
                                <div class="stat-number">1,245</div>
                                <div class="stat-label">新增外链</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number">18</div>
                                <div class="stat-label">失败次数</div>
                            </div>
                        </div>
                    </div>

                    <div class="sync-controls">
                        <button class="sync-btn primary" onclick="syncData('auto')">立即同步</button>
                        <button class="sync-btn" onclick="testConnection('auto')">测试连接</button>
                    </div>

                    <div class="last-sync">
                        最后同步: <span class="sync-time">2024-01-15 14:32:15</span>
                    </div>
                </div>
            </div>

            <!-- UGC内容发布系统 -->
            <div class="data-source-card">
                <div class="card-header">
                    <div class="source-info">
                        <div class="source-icon ugc">👥</div>
                        <div class="source-details">
                            <h3>UGC内容发布系统</h3>
                            <div class="source-description">直连数据库，实时同步</div>
                        </div>
                    </div>
                    <div class="status-indicator">
                        <div class="status-dot connected"></div>
                        <span class="status-text connected">已连接</span>
                    </div>
                </div>
                <div class="card-content">
                    <div class="connection-details">
                        <div class="detail-item">
                            <div class="detail-label">数据库地址</div>
                            <div class="detail-value">192.168.1.11:3306</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">连接状态</div>
                            <div class="detail-value">正常</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">延迟</div>
                            <div class="detail-value">5ms</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">同步模式</div>
                            <div class="detail-value">实时同步</div>
                        </div>
                    </div>

                    <div class="sync-stats">
                        <div class="stats-title">今日同步统计</div>
                        <div class="stats-grid">
                            <div class="stat-item">
                                <div class="stat-number">367</div>
                                <div class="stat-label">新增外链</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number">14</div>
                                <div class="stat-label">失败次数</div>
                            </div>
                        </div>
                    </div>

                    <div class="sync-controls">
                        <button class="sync-btn primary" onclick="syncData('ugc')">立即同步</button>
                        <button class="sync-btn" onclick="testConnection('ugc')">测试连接</button>
                    </div>

                    <div class="last-sync">
                        最后同步: <span class="sync-time">2024-01-15 14:31:45</span>
                    </div>
                </div>
            </div>

            <!-- 人工采购系统 -->
            <div class="data-source-card">
                <div class="card-header">
                    <div class="source-info">
                        <div class="source-icon manual">📝</div>
                        <div class="source-details">
                            <h3>人工采购系统</h3>
                            <div class="source-description">Excel模板导入，定期同步</div>
                        </div>
                    </div>
                    <div class="status-indicator">
                        <div class="status-dot warning"></div>
                        <span class="status-text warning">连接超时</span>
                    </div>
                </div>
                <div class="card-content">
                    <div class="connection-details">
                        <div class="detail-item">
                            <div class="detail-label">导入方式</div>
                            <div class="detail-value">Excel模板</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">连接状态</div>
                            <div class="detail-value">超时</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">同步频率</div>
                            <div class="detail-value">每4小时</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">下次同步</div>
                            <div class="detail-value">16:00</div>
                        </div>
                    </div>

                    <div class="sync-stats">
                        <div class="stats-title">今日同步统计</div>
                        <div class="stats-grid">
                            <div class="stat-item">
                                <div class="stat-number">89</div>
                                <div class="stat-label">新增外链</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number">13</div>
                                <div class="stat-label">失败次数</div>
                            </div>
                        </div>
                    </div>

                    <div class="sync-controls">
                        <button class="sync-btn primary" onclick="syncData('manual')">重新连接</button>
                        <button class="sync-btn" onclick="uploadExcel()">上传Excel</button>
                    </div>

                    <div class="last-sync">
                        最后同步: <span class="sync-time">2024-01-15 12:00:32</span>
                    </div>
                </div>
            </div>

            <!-- PR发布系统 -->
            <div class="data-source-card">

                <div class="card-content">
                    <div class="connection-details">
                        <div class="detail-item">
                            <div class="detail-label">录入方式</div>
                            <div class="detail-value">手动+批量</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">连接状态</div>
                            <div class="detail-value">正常</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">同步频率</div>
                            <div class="detail-value">每30分钟</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">下次同步</div>
                            <div class="detail-value">15:00</div>
                        </div>
                    </div>

                    <div class="sync-stats">
                        <div class="stats-title">今日同步统计</div>
                        <div class="stats-grid">
                            <div class="stat-item">
                                <div class="stat-number">45</div>
                                <div class="stat-label">新增外链</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number">0</div>
                                <div class="stat-label">失败次数</div>
                            </div>
                        </div>
                    </div>

                    <div class="sync-controls">
                        <button class="sync-btn primary" onclick="syncData('pr')">立即同步</button>
                        <button class="sync-btn" onclick="addPRRecord()">录入PR</button>
                    </div>

                    <div class="last-sync">
                        最后同步: <span class="sync-time">2024-01-15 14:30:18</span>
                    </div>
                </div>
            </div>
        </div>



    </main>

    <script>
        // 关闭警告横幅
        function closeAlert(element) {
            element.parentElement.style.display = 'none';
        }

        // 同步数据
        function syncData(sourceType) {
            const sourceNames = {
                'auto': '自动化外链系统',
                'ugc': 'UGC内容发布系统',
                'manual': '人工采购系统',
                'pr': 'PR发布系统'
            };

            alert(`正在同步 ${sourceNames[sourceType]} 数据...\n\n同步内容：\n- 获取最新外链记录\n- 数据标准化处理\n- 质量评分计算\n- 重复数据检测`);
        }

        // 测试连接
        function testConnection(sourceType) {
            alert('测试连接中...\n\n检测项目：\n- 网络连通性\n- 数据库访问权限\n- 接口响应时间\n- 数据格式验证');
        }

        // 上传Excel
        function uploadExcel() {
            alert('打开Excel上传界面\n\n支持格式：\n- .xlsx/.xls文件\n- 标准模板格式\n- 最大10MB文件');
        }

        // 添加PR记录
        function addPRRecord() {
            alert('打开PR记录录入界面\n\n录入内容：\n- PR文章URL\n- 外链URL\n- 发布平台\n- 质量指标');
        }

        // 刷新日志
        function refreshLogs() {
            alert('刷新同步日志...');
            // 这里可以添加实际的日志刷新逻辑
        }

        // 模拟实时状态更新
        setInterval(() => {
            const timeElements = document.querySelectorAll('.sync-time');
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });

            // 随机更新一个时间（模拟实时同步）
            if (timeElements.length > 0) {
                const randomIndex = Math.floor(Math.random() * timeElements.length);
                if (Math.random() < 0.1) { // 10% 概率更新
                    timeElements[randomIndex].textContent = timeString;
                }
            }
        }, 5000);
    </script>
</body>

</html>